<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" th:replace="layout (title='产品服务')">
<div th:fragment="content">
    <div class="m2ban wOpacity wow fadeIn" data-wow-delay="0.0s"  th:style="'background-image:url('+${bannerInfo.imgSrc+')'}">
        <div class="m2banTxt">
            <div class="m2ban_t1 wOpacity wow fadeInUp" data-wow-delay="0.2s"  th:text="${bannerInfo.title}"></div>
            <div class="m2ban_des1 wOpacity wow fadeInUp" data-wow-delay="0.4s" th:text="${bannerInfo.realTitle}"></div>
        </div>
    </div>
    <div class="m2menu wOpacity wow fadeIn" data-wow-delay="0.3s">
        <a th:each="a,iterStat : ${articleList}" th:href="${'/product?id='+a.id}"
           th:class="${'m2menu_a' + (a.id == currentId ? ' on' : '')}" >
            <span class="m2menuIcon"><img th:src="${'images/m2pm_i'+(iterStat.index+1)+'a.png'}" width="40" height="40">
                <img class="iOpacity" th:src="${'images/m2pm_i'+(iterStat.index+1)+'.png'}" width="40" height="40"></span>
            <p th:text="${a.title}"></p>
        </a>
    </div>
    <div class="container wOpacity wow fadeIn" data-wow-delay="0.0s">
        <div class="m2pro_ts" th:utext="${article.content}">
        </div>
        <div class="m2pub_t wOpacity wow fadeIn" data-wow-delay="0.1s">产品功能</div>
        <ul class="m2pu1 clearfix">
            <li class="col-xs-12 col-sm-6 col-md-4" th:each="g : ${gongneng}">
                <a href="javascript:;" class="m2pul_aBox">
                    <img th:src="${g.imgSrc}" width="70" height="70">
                    <strong th:text="${g.title}"></strong>
                    <p th:utext="${g.content}"></p>
                </a>
            </li>
        </ul>
    </div>
    <div class="m2pCon3 wOpacity wow fadeIn" data-wow-delay="0.0s">
        <div class="container">
            <div class="m2us_t wOpacity wow fadeIn" data-wow-delay="0.1s">产品优势</div>
            <ul class="m2p3ul clearfix wOpacity wow fadeIn" data-wow-delay="0.3s">
                <li class="col-xs-12 col-sm-6 col-md-3" th:each="y : ${youshi}">
                    <img th:src="${y.imgSrc}" width="64" height="74">
                    <strong th:text="${y.title}"></strong>
                    <div class="m2pc3Des">
                        <p th:utext="${y.content}"></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="m2pCon4 wOpacity wow fadeIn" data-wow-delay="0.0s">
        <div class="container">
            <div class="m2us_t wOpacity wow fadeIn" data-wow-delay="0.1s">产品形态</div>
            <ul class="m2pc4ul clearfix">
                <li th:each="x : ${xingtai}">
                    <div class="picTxtBox clearfix">
                        <div class="txtBox-wp iOpacity wow fadeInUp" data-wow-delay="0.5s">
                            <div class="txtBox">
                                <strong th:text="${x.title}"></strong>
                                <p th:utext="${x.content}"></p>
                            </div>
                        </div>
                        <div class="picBox-wp iOpacity wow fadeInDown" data-wow-delay="0.5s">
                            <div class="picBox w100">
                                <img th:src="${x.imgSrc}" width="382" height="246">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="m2pCon5 wOpacity wow fadeIn" data-wow-delay="0.0s">
        <div class="container">
            <div class="m2us_t wOpacity wow fadeIn" data-wow-delay="0.1s" th:text="${article.title + '使用场景'}"></div>
            <ul class="m2pc5ul clearfix wOpacity wow fadeIn" data-wow-delay="0.3s">
                <li class="col-xs-12 col-sm-6 col-md-3" th:each="c : ${changjing}">
                    <a href="javascript:;" class="m2pc5_aBox scaleImg">
                        <div class="overflowHide">
                            <div class="bgImg"><img th:src="${c.imgSrc}" width="136" height="136"></div>
                        </div>
                        <div class="m2pc5_tnm" th:text="${c.title}"></div>
                        <div class="m2pc5Layer">
                            <strong th:text="${c.title}"></strong>
                            <p th:utext="${c.content}"></p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <script>
        $(function () {
            $("#productLi").addClass("hover");
        })
    </script>
</div>
</html>